<template>
  <div class="activity-management">
    <h2>活动管理</h2>
    <button class="btn-primary" @click="addActivity">添加活动</button>
    <ul class="activity-list">
      <li v-for="activity in activities" :key="activity.id" class="activity-item">
        <div class="activity-info">
          <h3>{{ activity.title }}</h3>
          <p><strong>日期:</strong> {{ activity.date }}</p>
          <p><strong>地点:</strong> {{ activity.location }}</p>
          <p><strong>描述:</strong> {{ activity.description }}</p>
        </div>
        <div class="activity-actions">
          <button class="btn-edit" @click="editActivity(activity)">编辑</button>
          <button class="btn-delete" @click="deleteActivity(activity.id)">删除</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import activities from '../data/activities.js';

export default {
  data() {
    return {
      activities: activities // 使用全局活动数据
    };
  },
  methods: {
    addActivity() {
      // 确保只添加一次新活动
      const newActivity = {
        id: this.activities.length + 1,
        title: '新活动',
        date: new Date().toISOString().split('T')[0],
        description: '请输入活动描述',
        location: '请输入活动地点'
      };
      this.activities.push(newActivity); // 只操作当前组件的 activities 数据
    },
    editActivity(activity) {
      // 弹出输入框并更新活动信息
      const index = this.activities.findIndex(a => a.id === activity.id);
      if (index !== -1) {
        const updatedActivity = {
          ...activity,
          title: prompt('请输入新的活动名称', activity.title) || activity.title,
          date: prompt('请输入新的活动日期', activity.date) || activity.date,
          description: prompt('请输入新的活动描述', activity.description) || activity.description,
          location: prompt('请输入新的活动地点', activity.location) || activity.location
        };
        this.activities.splice(index, 1, updatedActivity); // 更新当前组件的 activities 数据
      }
    },
    deleteActivity(id) {
      // 删除指定活动
      const index = this.activities.findIndex(a => a.id === id);
      if (index !== -1) {
        this.activities.splice(index, 1); // 只操作当前组件的 activities 数据
      }
    }
  }
};
</script>

<style scoped>
.activity-management {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  padding: 10px 20px;
  background-color: #ff4d4d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
  margin-bottom: 20px;
}

.btn-primary:hover {
  background-color: #e60000;
}

.activity-list {
  list-style-type: none;
  padding: 0;
}

.activity-item {
  background-color: white;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.activity-info {
  flex: 1;
}

.activity-info h3 {
  margin-top: 0;
}

.activity-actions {
  display: flex;
  flex-direction: column;
}

.btn-edit, .btn-delete {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  margin-bottom: 5px;
}

.btn-edit {
  background-color: #42b983;
  color: white;
}

.btn-edit:hover {
  background-color: #3aa772;
}

.btn-delete {
  background-color: #ff4d4d;
  color: white;
}

.btn-delete:hover {
  background-color: #e60000;
}
</style>